import React, { useCallback, useMemo } from 'react'
import { Text, View } from '@tarojs/components'
import { GoodsITF } from '@INTERFACES/Goods'
import GoodsItem from '@COMPONENTS/Goods/GoodsItem'
import { LanguageType } from '@INTERFACES/Common'
import { openPage } from '@UTILS/common'
import { STORE_ROUTER_DATA } from '@CONSTANTS/common'
import Taro from '@tarojs/taro'
import { Analytic_Type } from '@CONSTANTS/analytic'
import style from './RecommendGoods.module.scss'

interface Props {
  goods: GoodsITF[];
  language: LanguageType;
  isShowTopLine: boolean;
  hasPlan: boolean;
}

const MAX_LENGTH = 2

const RecommendGoods: React.FC<Props> = ({ goods, language, isShowTopLine, hasPlan }) => {
  const eventParams = useMemo(() => (hasPlan ? '已加入计划' : '未加入计划'), [hasPlan])
  const onClickMore = useCallback(() => {
    Taro.tracker.trackEvent(Analytic_Type.tap_pain_manage_store.eventId, eventParams)
    openPage('wmpRoute', STORE_ROUTER_DATA)
  }, [eventParams])

  if (!Array.isArray(goods) || goods.length < 1) return null
  const goodItems = goods.slice(0, MAX_LENGTH)

  return (
    <View className={`${style.container} ${isShowTopLine ? style.topLine : ''}`}>
      <View className={style.containerClass}>
        <View className={style.block} />
        <Text className={style.rightTitle}>更多帮助</Text>
      </View>
      <>
        {
          goodItems.map(item => (
            <GoodsItem
              key={item.p8Id}
              eventId={Analytic_Type.tap_pain_manage_goods.eventId}
              eventParams={eventParams}
              containerClass={style.goodsItem}
              data={item}
              language={language}
            />
          ))
        }
      </>
      <View className={style.bottomView} onClick={onClickMore}>
        <Text className={style.btnText}>{'点击获取更多商品 >'}</Text>
      </View>
    </View>
  )
}

export default RecommendGoods

